<template>
  <base-paenl>
    <span slot="header">项目信息</span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        class="panel-item"
        @click="showDialog(item)"
      >
        <div
          :class="
            ['租赁项目数', '保障性租赁住房项目数', '中央财补项目数'].includes(
              item.name
            )
              ? 'panel-row clickable'
              : 'panel-row'
          "
        >
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div class="panel-row-content-name" :title="item.name">
              {{ item.name }}
            </div>
            <div
              class="panel-row-content-value"
              :title="item.value + item.text1 + item.value2 + item.text2"
            >
              {{ item.value }} {{ item.text1 }} {{ item.value2 }}
              {{ item.text2 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "../leftPanels/CBase.vue";
import { getProjectInfo } from "@/assets/modules/service";
// import mockData from "@/static/json/mockData.json";
// import axios from "axios";

@Component({
  name: "ProjectInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData(val: any) {
    this.getProjectInfo();
  }
  @Watch("datePickerValue", { deep: true })
  handleDatePickerValue(val: any) {
    debugger
    this.getProjectInfo();
  }
  dataList: any = [];
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.projectInformation;
    this.getProjectInfo();
  }
  getProjectInfo() {
    const data: any = {
      // dataTime: this.datePickerValue,
      kssj: this.datePickerValue[0] ? this.datePickerValue[0] : '',
      jssj: this.datePickerValue[1] ? this.datePickerValue[1] : '',
      code: this.areaData.areaCode,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList
    };
    // axios.get("/json/mockData.json").then((resData: any) => {
    //   const res = resData.data[val].projectInfo;
    //   if (res?.data) {
    //     this.dataList.zlxms.value = res.data.zlxms;
    //     this.dataList.zlxms.value2 = res.data.zlxmfyts;
    //     this.dataList.bzxzlzfxms.value = res.data.bzxzlzfxms;
    //     this.dataList.bzxzlzfxms.value2 = res.data.bzxzlzfxmfyts;
    //     this.dataList.zycbxms.value = res.data.zycbxms;
    //     this.dataList.zycbxms.value2 = res.data.zycbxmfyts;
    //     this.dataList.fgzxms.value = res.data.fgzxms;
    //     this.dataList.fgzxms.value2 = res.data.fgzxmfyts;
    //     this.dataList.slcxms.value = res.data.slcxms;
    //     this.dataList.slcxms.value2 = res.data.slcxmspjgs;
    //   } else {
    //     this.dataList.zlxms.value = 0;
    //     this.dataList.zlxms.value2 = 0;
    //     this.dataList.bzxzlzfxms.value = 0;
    //     this.dataList.bzxzlzfxms.value2 = 0;
    //     this.dataList.zycbxms.value = 0;
    //     this.dataList.zycbxms.value2 = 0;
    //     this.dataList.fgzxms.value = 0;
    //     this.dataList.fgzxms.value2 = 0;
    //     this.dataList.slcxms.value = 0;
    //     this.dataList.slcxms.value2 = 0;
    //   }
    // });
    getProjectInfo(data).then((res: any) => {
      if (res?.data) {
        this.dataList.zlxms.value = res.data.zlxms;
        this.dataList.zlxms.value2 = res.data.zlxmfyts;
        this.dataList.bzxzlzfxms.value = res.data.bzxzlzfxms;
        this.dataList.bzxzlzfxms.value2 = res.data.bzxzlzfxmfyts;
        this.dataList.zycbxms.value = res.data.zycbxms;
        this.dataList.zycbxms.value2 = res.data.zycbxmfyts;
        this.dataList.fgzxms.value = res.data.fgzxms;
        this.dataList.fgzxms.value2 = res.data.fgzxmfyts;
        this.dataList.slcxms.value = res.data.slcxms;
        this.dataList.slcxms.value2 = res.data.slcxmspjgs;
      } else {
        this.dataList.zlxms.value = 0;
        this.dataList.zlxms.value2 = 0;
        this.dataList.bzxzlzfxms.value = 0;
        this.dataList.bzxzlzfxms.value2 = 0;
        this.dataList.zycbxms.value = 0;
        this.dataList.zycbxms.value2 = 0;
        this.dataList.fgzxms.value = 0;
        this.dataList.fgzxms.value2 = 0;
        this.dataList.slcxms.value = 0;
        this.dataList.slcxms.value2 = 0;
      }
    });
  }
  showDialog(item: any) {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
      new Date().getMonth() + 1
    ) {
    } else {
      let floorSiteData: any = {
        name: "",
        children: []
      };
      if (
        ["租赁项目数", "保障性租赁住房项目数", "中央财补项目数"].includes(
          item.name
        )
      ) {
        floorSiteData = JSON.parse(JSON.stringify(item));
        this.$store.commit("panel/setDialogShow", false);
        this.$nextTick(() => {
          this.$store.commit("panel/setDialogShow", true);
          this.$store.commit("panel/setDialog", "floorSite");
          this.$store.commit("panelData/setFloorSiteData", floorSiteData);
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 185px;
}
</style>
